<template>
  <VabDrawer v-model="isShowDialog" :close-on-click-modal="true" show-fullscreen :title="title" width="30%">
    <CommonForm
      ref="formRef"
      v-model="form"
      v-loading="state.formLoading"
      :layout-config="option.layoutConfig"
      :option="option"
      @on-extend-validate="onHandleExtendValidate"
      @on-submit="onhandleSubmit"
    />
    <template #footer>
      <el-button @click="handleClose">取 消</el-button>
      <el-button :loading="state.saveLoading" type="primary" @click="handleSave"> 确 定 </el-button>
    </template>
  </VabDrawer>
</template>

<script>
import VabDrawer from "@/plugins/VabDialog/drawerModule.vue";
import { doAdd, doUpdate, getDetails } from "@/api/mains";
import CommonForm from "@/plugins/form/CommonForm.vue";
import { TableColumnOrFormTypeEnum } from "@/plugins/commonType.enum";
import { succAddmsg, succUpdatemsg } from "@/utils/MessageUtils";

export default defineComponent({
  name: "ParamEdit",
  components: { VabDrawer, CommonForm },
  emits: {
    "form-fetch-data": null
  },

  setup(props, { emit }) {
    const formRef = ref();
    const isShowDialog = ref(false);
    const title = ref("");

    const state = reactive({
      url: "system/config",
      formLoading: false,
      saveLoading: false
    });

    const showDialog = async row => {
      isShowDialog.value = true;
      if (row && row.id) {
        title.value = "编辑参数";
        state.formLoading = true;
        const { code, data } = await getDetails(state.url, row.id);
        state.formLoading = false;
        if (code == 200) {
          form.value = data;
        }
      } else {
        title.value = "添加参数";
        form.value = {};
      }
    };

    const handleClose = () => {
      formRef.value.resetFields();
      form.value = {};
      isShowDialog.value = false;
    };

    const option = ref(null);
    const form = ref({
      configName: "",
      configKey: "",
      configValue: "",
      configType: "",
      memo: ""
    });
    option.value = {
      layoutConfig: {
        column: 1
        // columnGap: '40px',
      },
      column: [
        {
          label: "参数名称",
          prop: "configName",
          type: TableColumnOrFormTypeEnum.INPUT
        },
        {
          label: "参数编码",
          prop: "configKey",
          type: TableColumnOrFormTypeEnum.INPUT
        },
        {
          label: "参数类型",
          prop: "configType",
          type: TableColumnOrFormTypeEnum.SELECT,
          dictCode: "SysParamType"
        },
        {
          label: "参数值",
          type: TableColumnOrFormTypeEnum.INPUT,
          prop: "configValue"
        },
        {
          label: "参数描述",
          prop: "memo",
          type: TableColumnOrFormTypeEnum.TEXTAREA,
          placeholder: "请输入参数描述"
        }
      ],
      formConfig: {
        title: "",
        labelPosition: "right",
        labelWidth: "120px",
        isInModal: true,
        disabled: false
      },
      btnsConfig: {
        save: {
          isShow: false
        },
        back: {
          isShow: false
        }
      },
      rules: {
        configName: [
          {
            required: true,
            trigger: "blur",
            message: "请输入参数名称"
          },
          {
            min: 1,
            max: 200,
            message: "输入长度 1 至 200",
            trigger: "blur"
          }
        ],
        configKey: [
          {
            required: true,
            trigger: "blur",
            message: "请输入参数编码"
          },
          {
            min: 1,
            max: 200,
            message: "输入长度 1 至 200",
            trigger: "blur"
          }
        ],
        configValue: [
          {
            required: true,
            trigger: "blur",
            message: "请输入参数值"
          },
          {
            min: 1,
            max: 200,
            message: "输入长度 1 至 200",
            trigger: "blur"
          }
        ],
        configType: [{ required: true, trigger: "blur", message: "请选择参数类型" }],
        memo: [
          {
            max: 200,
            message: "输入最大长度200",
            trigger: "blur"
          }
        ]
      }
      //submitUrl: 'qqq/gfdgf',
    };

    const onHandleExtendValidate = () => {
      option.value.isValidatePass = true;
    };

    const handleSave = () => {
      formRef.value.onhandleSubmit();
    };

    const onhandleSubmit = async () => {
      if (form.value.id == null || form.value.id == "") {
        state.formLoading = true;
        state.saveLoading = true;
        const responseData = await doAdd(state.url, form.value);

        state.formLoading = false;
        state.saveLoading = false;
        if (responseData.code == 200) {
          succAddmsg(responseData.msg);
          emit("form-fetch-data", responseData);
          handleClose();
        } else {
          //failAddMsg(responseData.msg)
        }
      } else {
        state.formLoading = true;
        state.saveLoading = true;
        const responseData = await doUpdate(state.url, form.value);
        state.formLoading = false;
        state.saveLoading = false;
        if (responseData.code == 200) {
          succUpdatemsg(responseData.msg);
          emit("form-fetch-data", responseData);
          handleClose();
        } else {
          //failUpdateMsg(responseData.msg)
        }
      }
    };

    return {
      formRef,
      title,
      isShowDialog,
      state,
      showDialog,
      handleClose,
      option,
      form,
      onHandleExtendValidate,
      handleSave,
      onhandleSubmit
    };
  }
});
</script>
<style lang="scss" scoped>
.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 30%;
  padding: 10px;
  text-align: right;
  background: #ffffff;
  border-top: 1px solid #dcdfe6;
}
.footer button {
  width: 45%;
  line-height: 35px !important;
}
.el-form {
  padding: 2% 2% 10% 0;
  line-height: 20px;
}
.formbody {
  position: absolute;
  inset: 65px 0 55px;
  overflow-x: hidden;
  overflow-y: scroll;
  :deep() {
    .el-form-item,
    .el-input,
    .el-select,
    .el-textarea {
      width: 100% !important;
    }
    .el-form-item__content {
      width: 65%;
    }
  }
}
</style>
